<template>
	<view class="root">
		<view
			@click="chooseAvatar"
			class="fd-row jc-sb bgc-fff pt-22 pb-22 pl-30 pr-30"
		>
			<image
				class="avatar bgc-eee br-circle"
				:src="
					model.avatarUrl.value || '/static/images/default-avatar.png'
				"
				mode="aspectFill"
			/>
			<label>
				<text class="color-999 fs-28">修改头像</text>
				<uni-icons type="arrowright" color="#999" />
			</label>
		</view>

		<view>
			<view
				v-for="(options, index) in content"
				:key="index"
				class="mt-10"
			>
				<view
					v-for="option in options"
					:key="option.name"
					class="fd-row jc-sb bgc-fff mb-2 pl-30 pr-30 pt-40 pb-40"
				>
					<text class="fs-30 color-282828">{{ option.title }}</text>
					<label
						v-if="option.el === 'label'"
						@click="operation(option)"
					>
						<input
							class="input color-666 fs-28 text-right"
							:type="option.type || 'text'"
							v-model="model[option.name].value"
							:maxlength="option.length"
							:placeholder="option.placeholder"
							:disabled="true"
						/>
						<uni-icons type="arrowright" color="#999" />
					</label>

					<picker
						v-else-if="option.el === 'picker'"
						:mode="option.mode"
						@change="changePicker(option, $event)"
					>
						<label>
							<input
								class="input color-666 fs-28 text-right"
								:type="option.type || 'text'"
								v-model="model[option.name].value"
								:maxlength="option.length"
								:placeholder="option.placeholder"
								:disabled="true"
							/>
							<uni-icons type="arrowright" color="#999" />
						</label>
					</picker>

					<input
						v-else
						class="input color-666 fs-28 text-right"
						:type="option.type || 'text'"
						v-model="model[option.name].value"
						:maxlength="option.length"
						:placeholder="option.placeholder"
						:disabled="option.disabled"
					/>
				</view>
			</view>
		</view>

		<button
			@click="logout"
			hover-class="tap-hover"
			class="mt-100 br-48 ml-30 mr-30 bgc-1c9dff lh-100 color-fff fs-32"
		>
			退出登录
		</button>

		<view
			:style="{ transform: 'translateX(-50%)' }"
			class="fixed bottom-88 left-50percent ai-center"
		>
			<text v-if="version" class="fs-26 mb-30 color-999">
				version: {{ version }}
			</text>
			<navigator
				class="color-1c9dff fs-22"
				hover-class="tap-hover"
				hover-start-time="50"
				:url="`/pages/common/webView?url=${decodeURIComponent(
					baseData.privacy
				)}`"
			>
				隐私政策
			</navigator>
			<navigator
				class="color-1c9dff fs-22"
				hover-class="tap-hover"
				:url="`/pages/common/webView?url=${decodeURIComponent(
					baseData.agreement
				)}`"
			>
				用户使用协议
			</navigator>

			<text
				:style="{ whiteSpace: 'nowrap' }"
				class="mt-26 fs-16 color-999 oapcity-06"
			>
				{{ baseData.copyright }}
			</text>
		</view>
	</view>
</template>

<script lang="ts">
	import { Storage } from "@/libs/utils";
	import { $config } from "@/common";
	import Vue from "vue";
	import Component from "vue-class-component";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";

	let version: string | void = "";
	// #ifdef APP-PLUS
	version = plus?.runtime?.version;
	// #endif

	@Component({ components: { uniIcons } })
	export default class setting extends Vue {
		// component property
		content: AnyObject[] = [
			[
				{
					name: "nickName",
					title: "昵称",
					el: "input",
					placeholder: "请输入昵称",
				},
				{
					name: "gender",
					title: "性别",
					el: "label",
					placeholder: "--",
				},
				{
					name: "birthday",
					title: "生日",
					el: "picker",
					mode: "date",
					placeholder: "请选择生日",
				},
			],
			[
				{
					name: "phoneNumber",
					title: "手机号",
					el: "input",
					type: "number",
					placeholder: "请输入手机号",
					disabled: true,
				},
			],
		];

		userInfo: AnyObject = Storage.get("userInfo");
		baseData: AnyObject = Storage.get("baseData");

		version = version;

		get model(): AnyObject {
			const {
				nickName,
				gender,
				birthday,
				phoneNumber,
				avatarUrl,
			} = this.userInfo;
			return {
				avatarUrl: { value: avatarUrl, data: null },
				nickName: { value: nickName, data: "" },
				gender: { value: gender, data: "" },
				birthday: { value: birthday, data: "" },
				phoneNumber: { value: phoneNumber, data: "" },
			};
		}

		onNavigationBarButtonTap(e: AnyObject) {
			if (e.float !== "right") return;

			const submit = () => {
				const params = Object.keys(this.model)
					.filter((key) => this.model[key].value !== this.userInfo[key])
					.map((key) => [
						[key],
						this.model[key].data || this.model[key].value,
					]);

				if (!params.length) return;

				this.request
					.get("/employee/userInfoHandle", Object.fromEntries(params))
					.then(({ msg: title, data }) => {
						this.userInfo = Storage.update("userInfo", data);
						uni.showToast({
							title,
							success: () => setTimeout(uni.navigateBack, 1500),
						});
					});
			};
			if (this.model.avatarUrl.value !== this.userInfo.avatarUrl) {
				uni.showLoading({ title: "Uploading..." });
				uni.uploadFile({
					url: $config.API_URL + "/employee/upimg",
					filePath: this.model.avatarUrl.value,
					name: "file",
					header: { token: Storage.get("userInfo").token },
					success: ({ data: result }) => {
						const { data, code, msg: title } = JSON.parse(result);
						if (!code) {
							uni.showToast({
								title,
								icon: "none",
							});
							return;
						}
						this.model.avatarUrl.data = data;
						uni.hideLoading();
						submit();
					},
					fail: uni.hideLoading,
				});

				return;
			}

			submit();
		}

		operation(option: AnyObject) {
			if (option.name === "gender") {
				const itemList = ["男", "女"];
				uni.showActionSheet({
					itemList,
					success: ({ tapIndex }) => {
						this.model.gender = {
							value: itemList[tapIndex],
							data: tapIndex + 1,
						};

						this.$forceUpdate();
					},
				});
			}
		}

		changePicker(option: AnyObject, { detail }: AnyObject) {
			this.model[option.name].value = detail.value;
			this.$forceUpdate();
		}

		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				success: ({ tempFilePaths }) => {
					this.model.avatarUrl.value = tempFilePaths[0];
					this.$forceUpdate();
				},
			});
		}

		logout() {
			Storage.clear();
			uni.reLaunch({ url: "/pages/common/authorization" });
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.root {
		.avatar {
			width: 124rpx;
			height: 124rpx;
		}
	}
</style>